<script setup>
import NavBarHeader from '@/components/NavBarHeader.vue'
import { useRoute } from 'vue-router'
import { ref } from 'vue'
import axiosInstance from '@/utils/request'
import { TOKEN } from '@/utils/constant'
import { useUserStore } from '@/stores/user'
import router from '@/router'
import { showSuccessToast } from 'vant'
const route = useRoute()
const store = useUserStore()
const contactDedail = ref('')

// 获取联系人Id
const contactId = route.params.id
const getContactDetail = () => {
  axiosInstance
    .get(`/user/${contactId}`, {
      headers: {
        TOKEN: store.token
      }
    })
    .then((response) => {
      contactDedail.value = response.data.data
    })
    .catch((error) => {
      console.log(error)
    })
}
const handleChat = () => {
  router.push({
    path: '/chat',
    query: {
      contactId: contactDedail.value.id,
      contactName: contactDedail.value.nickname,
      avatar: contactDedail.value.avatar,
      sessionId: contactDedail.value.sessionId
    }
  })
}
const handleAddFriend = () => {
  axiosInstance
    .post(
      '/friend/apply',
      {
        userId: store.user.id,
        friendApplyId: contactDedail.value.id
      },
      {
        headers: {
          TOKEN: store.token
        }
      }
    )
    .then((response) => {
      console.log(response)
      showSuccessToast('好友申请成功,等待好友验证')
    })
    .catch((error) => {
      console.log(error)
    })
}
const handleCall = () => {
  router.push({
    path: '/call',
    query: {
      targetUserId: contactId
    }
  })
}
getContactDetail()
</script>

<template>
  <NavBarHeader />
  <div class="my-page">
    <div class="header">
      <img class="avatar" :src="contactDedail.avatar" alt="头像" />
      <div class="user-info">
        <h2 style="color: #000" class="username">
          {{ contactDedail.nickname }}
        </h2>
        <p
          class="status"
          style="color: green"
          v-if="contactDedail.status === 0"
        >
          在线
        </p>
        <p
          class="status"
          style="color: gray"
          v-else="contactDedail.status === 1"
        >
          离开
        </p>
      </div>
    </div>
    <div class="menu">
      <van-cell
        v-if="contactDedail.isContact"
        @click="handleChat"
        title="发消息"
        icon="user-o"
        class="menu-item"
      />
      <van-cell
        v-if="contactDedail.isContact"
        @click="handleCall"
        title="视频通话"
        icon="phone-o"
        class="menu-item"
      />
      <van-cell
        v-else
        @click="handleAddFriend"
        title="添加好友"
        icon="user-o"
        class="menu-item"
      />
    </div>
  </div>
</template>

<style scoped>
.my-page {
  background-color: #f0f0f0;
  height: 100vh;
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
}

.user-info {
  flex: 1;
}

.username {
  font-size: 1.1em;
  margin: 0;
}

.status {
  font-size: 0.8em;
  color: #888;
}

.menu {
  margin-top: 20px;
}

.menu-item {
  margin-bottom: 10px; /* 设置每个菜单项之间的间距 */
}
</style>
